import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../model.dart';
import '../state.dart';

class QuestionList extends StatefulWidget {
  const QuestionList({super.key, required this.questions});

  final List<QuestionModel> questions;

  @override
  State<QuestionList> createState() => _QuestionListState();
}

class _QuestionListState extends State<QuestionList>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final state = context.watch<StateManager>();
    return ListView.builder(
      padding: const EdgeInsets.all(10),
      itemCount: widget.questions.length,
      itemBuilder: (context, index) {
        final item = widget.questions[index];
        return Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
            border: Border.all(color: Colors.blue),
          ),
          margin: const EdgeInsets.only(bottom: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: Text(
                      (index + 1).toString(),
                      style: const TextStyle(color: Colors.grey),
                    ),
                  ),
                  IconButton(
                    onPressed: () => state.removeQuestion(index),
                    icon: const Icon(
                      Icons.delete,
                      size: 18,
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
              const Divider(height: 10),
              // 题目
              Padding(
                padding: const EdgeInsets.all(10),
                child: RichText(
                  text: TextSpan(
                    children: [
                      TextSpan(
                        text: item.question,
                        style: const TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                        ),
                      ),
                      if (item.must)
                        const TextSpan(
                          text: ' *',
                          style: TextStyle(color: Colors.red),
                        ),
                    ],
                  ),
                ),
              ),
              // 答案输入位置
              Padding(
                padding: const EdgeInsets.fromLTRB(10, 0, 10, 20),
                child: TextField(
                  controller: state.answerControllers[state.activeIndex][index],
                  decoration: InputDecoration(
                    hintText: item.placeholder,
                  ),
                  onChanged: (value) => state.onAnswerChanged(value, index),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}
